<template>
  <el-form-item label="ID">
    <el-input v-model="selectedOptions.name" disabled />
  </el-form-item>
  <el-form-item label="name">
    <el-input v-model="selectedWidget.name" disabled />
  </el-form-item>
  <el-form-item label="滚动条高度">
    <el-input v-model="selectedOptions.height" />
  </el-form-item>
  <el-form-item label="滚动条最大高度">
    <el-input v-model="selectedOptions.maxHeight" />
  </el-form-item>
  <el-form-item label="滚动条名称">
    <el-input v-model="selectedOptions.scrollbarText" />
  </el-form-item>
  <el-form-item label="是否使用原生滚动条样式">
    <el-switch v-model="selectedOptions.native" />
  </el-form-item>
  <el-form-item label="包裹容器的自定义样式">
    <el-input v-model="selectedOptions.wrapStyle" />
  </el-form-item>
  <el-form-item label="包裹容器的自定义类名">
    <el-input v-model="selectedOptions.wrapClass" />
  </el-form-item>
  <el-form-item label="视图的自定义样式">
    <el-input v-model="selectedOptions.viewStyle" />
  </el-form-item>
  <el-form-item label="视图的自定义类名">
    <el-input v-model="selectedOptions.viewClass" />
  </el-form-item>
  <el-form-item label="设置优化容器尺寸">
    <el-switch v-model="selectedOptions.noresize" />
  </el-form-item>
  <el-form-item label="视图的元素标签">
    <el-input v-model="selectedOptions.tag" />
  </el-form-item>
  <el-form-item label="滚动条总是显示">
    <el-switch v-model="selectedOptions.always" />
  </el-form-item>
  <el-form-item label="滚动条最小尺寸">
    <el-input-number v-model="selectedOptions.minSize" :min="20" />
  </el-form-item>
  <el-form-item label="视图ID">
    <el-input v-model="selectedOptions.id" />
  </el-form-item>
  <el-form-item label="视图的角色">
    <el-input v-model="selectedOptions.role" />
  </el-form-item>
  <el-form-item label="视图的aria-label">
    <el-input v-model="selectedOptions.ariaLabel" />
  </el-form-item>
  <el-form-item label="视图的aria-orientation">
    <el-input v-model="selectedOptions.ariaOrientation" />
  </el-form-item>
</template>

<script setup>
defineOptions({
  name: "scrollbarAttribute",
  inheritAttrs: false,
});
let $props = defineProps({
  selectedWidget: {
    type: Object,
    required: true,
  },
  selectedOptions: {
    type: Object,
    required: true,
  },
});

</script>

<style lang="scss" scoped></style>
